$(function () {
    axios({
        method: 'get',
        url: "http://192.168.4.18:8000/more",
    })
        .then(function (res) {
            deal(res)

            $(window).scroll(function () {
                console.log(isReachBottom())
                if (isReachBottom()) {
                    /*发送http请求 */
                    deal(res)
                }
            })
            function isReachBottom() {
                var scrollTop = $(window).scrollTop(); //获取滚动条距离顶部的高
                var availHeight = $(window).height(); //获取可视区域的高
                var dw = $(document).height();  //获取内容区域的高
                return (scrollTop + availHeight) > dw - 200 ? true : false;
            }
        })

    function deal(res){
        res.data.forEach(element => {
            var htmls = `
        <div class="item">
            <img src=${element.imageUrl} alt="">
        </div>
        `
            $(".main").append(htmls);
        });
        
        // 获取一排能放几个
        var ww = $(window).width();
        var xw = $(".item").outerWidth();
        var max = Math.floor(ww / xw);
        // console.log(max);
        var arr = [];

        //遍历item
        setTimeout(function () {
            $(".item").each(function (index, element) {
                var height = $(this).outerHeight();
                if (index < max) {
                    arr.push(height);
                } else {
                    console.log(arr);
                    var heightMin = Math.min(...arr);
                    var minIndex = arr.indexOf(heightMin)
                    var left = $(".item").eq(minIndex).offset().left;
                    $(this).css({ position: "absolute", left: left, top: heightMin });
                    arr[minIndex] = heightMin + $(this).outerHeight();
                }
            });
        }, 100)
    }
})